/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */


$(document).ready(function () {
    // extension:

    $("html").niceScroll();

    $.fn.scrollEnd = function (callback, timeout) {
        $(this).scroll(function () {
            var $this = $(this);
            if ($this.data('scrollTimeout')) {
                clearTimeout($this.data('scrollTimeout'));
            }
            $this.data('scrollTimeout', setTimeout(callback, timeout));
        });
    };

    /*** Opacity Control ***/
    (function ($) {
        $.fn.opacityControl = function () {
            $(this).each(function () {
                var distFromTop = $(this).offset().top - $(window).scrollTop() - 100;
                if (distFromTop < 0) distFromTop = -distFromTop;
                var opacity = 1 - (distFromTop / $(window).height());
                if (opacity < 0.1) opacity = 0.1;
                //console.log(opacity);
                $(this).children(".short-desc").css("opacity", opacity);
                $(this).children(".disp-img").children("img").css("opacity", opacity);
            });
        };
    });

    $(window).scrollEnd(function () {
        $(".tl-main li").each(function () {
            var distFromTop = $(this).offset().top - $(window).scrollTop() - 100;
            if (distFromTop < 0) distFromTop = -distFromTop;
            var opacity = 1 - (distFromTop / $(window).height());
            if (opacity < 0.1) opacity = 0.1;
            //console.log(opacity);
            $(this).children(".short-desc").css("opacity", opacity);
            $(this).children(".disp-img").children("img").css("opacity", opacity);
        });
    });

    /*** View Individual Drama ***/
    (function ($) {
        $.fn.viewIndividual = function () {
            var t = $(this).offset().top + 40;
            var l = $(this).offset().left + 40;
            var w = $(window).width() + 100;
            var target = $(this).data("target");
            $(".round-overlay").css({
                "top": t,
                "left": l
            }).animate({
                height: 2 * w,
                width: 2 * w,
                top: -w + t,
                left: -w + l
            }, function () {

                $(".tl-main").hide();
                $(".expanded-view").show();
                $(this).fadeOut(function () {
                    $(this).css({
                        "height": 0,
                        "width": 0,
                        "top": 0,
                        "left": 0,
                        "display": "block"
                    });
                });

                $(".expanded-item.active").removeClass("active");
                $(target).addClass("active");
                $(".mini-menu a.active").removeClass("active");
                $(".mini-menu a[data-target='" + target + "']").addClass("active");
                $('.expanded-item-container').css({
                    'margin-top': -$(target).position().top + $(".expanded-item:first-child").position().top
                });
            });
        };
    }(jQuery));


    /*** Read More ***/
    (function ($) {
        $.fn.readMore = function () {
            var $text = $(this).prev("p");
            var contentHeight = $text.addClass('auto-height').height();
            $text.removeClass('auto-height').animate({
                height: (contentHeight == $text.height() ? 75 : contentHeight)
            }, 500);
            $text.closest(".written-content,.focus-desc").find(".behindsc-wrap p").animate({
                height: (contentHeight == $text.height() ? 75 : contentHeight) - 75
            }, 500);
            //contentHeight = contentHeight/2;
            var carousalAnim = -(contentHeight == $text.height() ? 0 : contentHeight) / 2;
            console.log(carousalAnim);
            $(this).closest(".carousal").find(".carousal-image-container").animate({ marginTop: carousalAnim });

            if (contentHeight >75) {
                $('html, body').animate({
                    'scrollTop': $(this).closest("li").position().top - (contentHeight - 75)
                });
            } else {
                $('html, body').animate({
                    'scrollTop': $(this).closest("li").position().top + 30
                });
            }
        };
    }(jQuery));


    /*** Close Target ***/
    (function ($) {
        $.fn.closeTarget = function () {
            $("#" + $(this).data('target')).fadeOut();
            $(".tl-main").fadeIn();

            $('html, body').animate({
                'scrollTop': $(".mark").position().top - 180
            });

            $("html").getNiceScroll().resize();
        };
    }(jQuery));


    /*** Expanded View Menu Control ***/
    (function ($) {
        $.fn.menuControl = function () {
            var target = $(this).data('target');
            $(".expanded-item.active").removeClass("active");
            $(target).addClass("active");
            $(".mini-menu a.active").removeClass("active");
            $(this).addClass("active");

            $('.expanded-item-container').animate({
                'marginTop': -$(target).position().top + $(".expanded-item:first-child").position().top
            });
        };
    }(jQuery));

    //$(".expanded-view").bind('mousewheel', function(event) {
    //    if (event.originalEvent.wheelDelta >= 0) {
    //        var currentActiveController = $(".mini-menu a.active");
    //        var target = currentActiveController.prev("a").data('target');

    //        if(target.length){
    //            $(".expanded-item.active").removeClass("active");
    //            $(target).addClass("active");
    //            currentActiveController.removeClass("active");
    //            currentActiveController.prev("a").addClass("active");

    //            $('.expanded-item-container').animate({
    //                'marginTop': -$(target).position().top + $(".expanded-item:first-child").position().top
    //            });
    //        }
    //        return false;
    //    }
    //    else {
    //        var currentActiveController = $(".mini-menu a.active");
    //        var target = currentActiveController.next("a").data('target');

    //        if(target.length){
    //            $(".expanded-item.active").removeClass("active");
    //            $(target).addClass("active");
    //            currentActiveController.removeClass("active");
    //            currentActiveController.next("a").addClass("active");

    //            $('.expanded-item-container').animate({
    //                'marginTop' : - $(target).position().top + $(".expanded-item:first-child").position().top
    //            });
    //        }
    //        return false;
    //    }
    //});


    /*** Carousal ***/
    (function ($) {
        $.fn.carousal = function () {
            return this.each(function () {
                var imageCount = $(this).find(".carousal-image-container").children("img").length;
                $(this).find(".carousal-image-container").width($(".carousal").width() * imageCount + 2 + "%");
                $(this).find(".carousal-image-container").children("img").width((100 / imageCount) + "%");
            });
        };
        $.fn.carousalSlide = function () {
            var currentCarousal = $(this).closest(".carousal");
            var controllerNumber = $(this).index() + 1;
            console.log(controllerNumber);
            currentCarousal.find('.carousal-image-container').animate({
                'marginLeft': -currentCarousal.find(".carousal-image-container img:nth-child(" + controllerNumber + ")").position().left + currentCarousal.find(".carousal-image-container img:first-child").position().left
            });
            currentCarousal.find(".carousal-controller a.active").removeClass('active');
            currentCarousal.find(".carousal-image-container img.active").removeClass('active');
            currentCarousal.find(".carousal-image-container img:nth-child(" + controllerNumber + ")").addClass("active");
            $(this).addClass("active");
        };

        $(window).resize(function () {
            $(".expanded-item.active .carousal .carousal-image-container").animate({
                'marginLeft': -$(".expanded-item.active .carousal").find(".carousal-image-container img.active").position().left + $(".expanded-item.active .carousal").find(".carousal-image-container img:first-child").position().left
            });
        });
    }(jQuery));


    /*** Detailed View ***/
    (function ($) {
        $.fn.detailView = function () {
            $(".dark-overlay").fadeIn(function () {
                $(".curtain").animate({
                    width: 80 + "%"
                }, 1000, function () {
                    $(".audience").css("width", (506 / 828 * $(window).height()));
                    $(".audience").fadeIn();
                    $(".dark-overlay").addClass("grey-flood");
                    $(".behind-the-scenes").fadeIn();
                });
            });
        };
        $.fn.backFromDetailView = function () {
            $(".audience").fadeOut();
            $(".dark-overlay").removeClass("grey-flood").fadeOut();
            $(".behind-the-scenes").fadeOut(function () {
                $(".curtain").animate({ width: 0 }, 1000);
            });
        };
    }(jQuery));

    /*** Menu Control ***/
    $(".menu").click(function () {
        $(".dark-overlay").fadeOut();
        $(".curtain").animate({ width: 0 });
        $(".audience").fadeOut();
        $(".behind-the-scenes").fadeOut();
        $("#expanded-view").fadeOut();
        $(".tl-main").fadeIn();
        $("html").getNiceScroll().resize();

        $("ul.tl-main").addClass("condensed");
        $("ul.tl-main.condensed").animate({
            width: 10 + "%"
        });
        $("ul.tl-main.condensed li").animate({
            padding: 20
        });
        $("ul.tl-main.condensed li .disp-img").animate({
            height: 20,
            width: 20,
            marginLeft: -32,
            marginTop: -2
        });
        $("ul.tl-main.condensed li .disp-img img").hide();
        $("ul.tl-main.condensed li .short-desc p").slideUp();
        $("ul.tl-main.condensed li .short-desc .dot-link").fadeOut();
        $("ul.tl-main.condensed li.focus .focus-desc").fadeOut(function () {
            $("ul.tl-main.condensed li.focus").removeClass("focus").addClass("markFocus");
        });
        $("ul.tl-main.condensed li .gen-date").animate({
            marginLeft: -130,
            marginTop: 2
        });
        $("ul.tl-main.condensed li .gen-date .day").hide();
        $("ul.tl-main.condensed li .countdown").hide();
        $("ul.tl-main.condensed").css({ "background-color": "transparent" });
        $(this).animate({ "marginRight": 0 + "%" }, function () {
            $(this).addClass("open");
        });
        $('html, body').animate({
            'scrollTop': $(".mark").position().top - 350
        });
        $(".tl-main li").position();
    });
    $(".menu").mouseleave(function () {
        $(this).removeClass("open");
        $(this).animate({ "marginRight": -65 + "%" }, function () {
            $(this).removeAttr("style");
            $("ul.tl-main.condensed").animate({
                "width": 67 + "%"
            });
            $("ul.tl-main.condensed li .disp-img img").show();
            $("ul.tl-main.condensed li .short-desc p").slideDown();
            $("ul.tl-main.condensed li .short-desc .dot-link").fadeIn();

            $("ul.tl-main.condensed li.markFocus").addClass("focus").removeClass("markFocus").children(".focus-desc").fadeIn();
            $("ul.tl-main.condensed").find("*").each(function () {
                $(this).removeAttr("style");
            });
            $("ul.tl-main.condensed").removeAttr("style");

            $("ul.tl-main.condensed").removeClass("condensed");

            $('html, body').animate({
                'scrollTop': $(".mark").position().top - 180
            });
        });
    });


});